<template>
	<div class="flex">
		<div class="flex flex-col items-center justify-around flex-1 text-center">
			<div>
				<div class="label_text">4</div>
				<div class="label_bg">在线</div>
			</div>
			<div>
				<div class="label_text">0</div>
				<div class="label_bg">离线</div>
			</div>
			<div>
				<div class="label_text">3</div>
				<div class="label_bg">超标</div>
			</div>
		</div>
		<div class="flex flex-col items-center justify-center mx-4 flex-2 count_bg">
			<div class="label_text">4</div>
			<div class="text-xs">总数</div>
		</div>
		<div class="flex flex-col items-start justify-around flex-1">
			<div>
				<div class="label_text">100%</div>
				<div class="text-center label_bg">在线率</div>
			</div>
			<div>
				<div class="label_text">0%</div>
				<div class="text-center label_bg">离线率</div>
			</div>
			<div>
				<div class="label_text">75%</div>
				<div class="text-center label_bg">超标率</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.count_bg {
	width: 230px;
	background-image: url('/@/assets/images/overview.png');
	background-size: contain contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.label_bg {
	width: 60px;
	line-height: 24px;
	font-size: 12px;
	background-image: url('/@/assets/images/lable.png');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.label_text {
	font-size: 24px;
	line-height: 24px;
	margin-bottom: 4px;
	text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
}
</style>
